/**
 * Created by YJH on 2018/5/24.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    ListView,
    RefreshControl,
} from 'react-native';
import Toast, {DURATION}from 'react-native-easy-toast';
import HttpUtils from '../expand/dao/HttpUtils';
import NavigationBarComponent from './NavigationBarComponent';
var data = {
    "result": [
        {
            "email": "qinshihuang@gmail.com",
            "fullName": "秦始皇"
        },
        {
            "email": "zhaogao@gmail.com",
            "fullName": "赵高"
        },
        {
            "email": "xaingyu@gmail.com",
            "fullName": "项羽"
        },
        {
            "email": "lisi@gmail.com",
            "fullName": "李斯"
        },
        {
            "email": "liubang@gmail.com",
            "fullName": "刘邦"
        },
        {
            "email": "zugeliang@gmail.com",
            "fullName": "诸葛亮"
        },
        {
            "email": "guanyu@gmail.com",
            "fullName": "关羽"
        },
        {
            "email": "xiaoming@gmail.com",
            "fullName": "小明"
        }, {
            "email": "qinshihuang@gmail.com",
            "fullName": "秦始皇"
        },
        {
            "email": "zhaogao@gmail.com",
            "fullName": "赵高"
        },
        {
            "email": "xaingyu@gmail.com",
            "fullName": "项羽"
        },
        {
            "email": "lisi@gmail.com",
            "fullName": "李斯"
        },
        {
            "email": "liubang@gmail.com",
            "fullName": "刘邦"
        },
        {
            "email": "zugeliang@gmail.com",
            "fullName": "诸葛亮"
        },
        {
            "email": "guanyu@gmail.com",
            "fullName": "关羽"
        },
        {
            "email": "xiaoming@gmail.com",
            "fullName": "小明"
        }
    ]
};

export default class FetchTest extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {
            title: 'Fetch',
            result: ''
        }
    }

    getNetData(url) {
        this.toast.show("正在获取网络数据..", DURATION.LENGTH_SHORT)
        // fetch(url)
        //     .then(response => response.json())
        //     .then(result => {
        //         this.setState({
        //             result: JSON.stringify(result)
        //         })
        //     })
        //     .catch(error => {
        //         this.setState({
        //             result: JSON.stringify(error)
        //         })
        //     })
        HttpUtils.get(url).then(result=>{
                    this.setState({
                        result: JSON.stringify(result)
                    })
        })
    }

    upLoadData(url, data) {
        this.toast.show("正在向网络上传数据..", DURATION.LENGTH_SHORT)
        // fetch(url, {
        //     method: 'POST',
        //     header: {
        //         'Accept': 'application/json',
        //         'Content-Type': 'application/json'
        //     },
        //     body: JSON.stringify(data)
        // })
        //     .then(response => response.json())
        //     .then(result => {
        //         this.setState({
        //             result: result
        //         })
        //     }).catch(error => {
        //     this.setState({
        //         result: JSON.stringify(error)
        //     })
        // })

        HttpUtils.post(url, data).then(result=>{
            this.setState({
                result: JSON.stringify(result)
            })
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <NavigationBarComponent
                    title={this.state.title}
                    style={{backgroundColor: 'green'}}
                />

                <TouchableOpacity
                    onPress={() => this.getNetData('http://rap2api.taobao.org/interface/get?id=:interfaceId')}>
                    <Text style={styles.boy_text}>获取数据</Text>
                </TouchableOpacity>

                <TouchableOpacity onPress={() => this.upLoadData('http://rap2api.taobao.org/interface',
                    {userName: '', password: ''})}>
                    <Text style={styles.boy_text}>上传数据</Text>
                </TouchableOpacity>

                <Text >返回结果：{this.state.result}</Text>
                <Toast ref={toast => (this.toast = toast)}/>

            </View>
        )
    }
}

const styles = StyleSheet.create(
    {
        container: {
            flex: 1,
        },

        boy_text: {
            fontSize: 18,
            width: 180,
            height: 60,
            alignItems: 'center',
            color: 'black',
            alignSelf: 'center',
            justifyContent: 'center',
            borderWidth: 1,
            marginTop: 20,
            borderColor: 'green'
        },
        item_text: {
            fontSize: 16,
            color: 'black',
        },
        item_row: {
            height: 60
        },
        item_line: {
            height: 1,
            backgroundColor: '#aaa'
        },
        item_image: {
            height: 100,
            width: 200,
            tintColor: 'red',
            justifyContent: 'center',
            alignSelf: 'center',
        }
    }
);